<template>
  <div class="tracetask-container">
    <v-layout wrap justify-center align-center>
      <v-flex md12 d-flex>
        <v-flex md2 px-2>
          <v-text-field v-model="queryForm.email" label="邮箱"></v-text-field>
        </v-flex>
        <v-flex md2 px-2>
          <v-text-field v-model="queryForm.QqNumber" label="QQ"></v-text-field>
        </v-flex>
        <v-flex md4 px-2>
          <v-btn round class="subTitle" color="primary" @click="onQuery">
            <span>查询</span>
            <v-icon>search</v-icon>
          </v-btn>
          <v-btn round class="subTitle" color="light-blue" dark @click="onAdd">
            <span>新增黑名单</span>
            <v-icon>add</v-icon>
          </v-btn>
        </v-flex>
      </v-flex>

      <!-- <v-flex md12 text-xs-left>
        <v-btn round class="subTitle" color="primary" @click="onBatchAudit">
          <span>批量审核</span>
        </v-btn>
      </v-flex>-->

      <!-- table -->
      <v-flex md12 class="elevation-1">
        <v-data-table
          :headers="headers"
          :loading="loading"
          :items="tableData"
          item-key="userId"
          v-model="selected"
          hide-actions
        >
          <template v-slot:headers="props">
            <tr>
              <th
                v-for="header in props.headers"
                :key="header.text"
                :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
                @click="changeSort(header.value)"
              >
                <!-- <v-icon small>arrow_upward</v-icon> -->
                {{ header.text }}
              </th>
            </tr>
          </template>
          <template v-slot:items="props">
            <tr>
              <td class="text-xs-center">{{ props.item.userId }}</td>
              <td class="text-xs-center">{{ props.item.realName }}</td>
              <td class="text-xs-center">{{ props.item.qqNumber }}</td>
              <td class="text-xs-center">{{ props.item.mobilePhone }}</td>
              <td class="text-xs-center">{{ props.item.bankCardNum }}</td>
              <td class="text-xs-center">{{ getTime(props.item.createTime) }}</td>
              <td class="text-xs-center">{{ getTime(props.item.checkTime) }}</td>
              <td width="18%" class="text-xs-center mini-button">
                <v-layout wrap justify-start align-center>
                  <v-flex md6 text-xs-left>
                    <v-btn
                      round
                      small
                      outline
                      class="subTitle"
                      color="indigo lighten-2"
                      @click.stop="onEdit(props.item)"
                    >
                      <div class="mr-1">编辑</div>
                    </v-btn>
                  </v-flex>

                  <!-- <v-flex md6 text-xs-right>
                    <v-btn
                      round
                      small
                      outline
                      class="subTitle"
                      color="red lighten-2"
                      @click.stop="onDelete(props.item)"
                    >
                      <div class="mr-1">删除</div>
                    </v-btn>
                  </v-flex> -->
                </v-layout>
              </td>
            </tr>
          </template>
          <template v-slot:no-data>
            <v-alert :value="true" outline color="warning" icon="info">暂无数据</v-alert>
          </template>
        </v-data-table>

        <v-layout class="pagination-wrapper">
          <v-flex md10 d-flex justify-start align-center>
            <v-flex d-flex md2 justify-start align-center>
              <v-flex md4 class="title-color">显示</v-flex>
              <v-flex md4>
                <v-select :items="pageOptions" v-model="pagination.limit"></v-select>
              </v-flex>
              <v-flex md4 class="title-color">条/页</v-flex>
            </v-flex>
            <v-flex md2 class="title-color">共 {{ pagination.pageCount }} 条数据</v-flex>
            <v-flex md2></v-flex>
            <v-flex md4>
              <v-pagination
                @input="onPageChange"
                :length="pagination.pageCount"
                circle
                total-visible="5"
                v-model="pagination.page"
              />
            </v-flex>
            <v-flex md2></v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>

    <v-dialog v-model="dialog" max-width="800px">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>{{ dialogTitle }}</v-card-title>
        <v-card-text>
          <!-- 查看评价图片 -->
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="onDialogConfirm">确认</v-btn>
          <v-btn color="grey darken-1" flat @click="dialog = false">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="title">{{ modalTitle }}</v-card-title>
        <v-card-text class="title">{{ modalContent }}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="onModalConfirm">确定</v-btn>
          <v-btn color="grey darken-1" flat @click="modal = false">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Todo, Admin, User, System } from "@/api";
import { TopupStatusKV, PageOptions } from "@/utils/constants";
import { KV, Pagination } from "@/utils/type";
import { forEach } from "lodash";
import { ReqUserInfo, ReqBlacklistInfo } from "@/api/bean";
import { getTime } from "@/utils/commonUtils";
declare const $Vue: Vue;

@Component
export default class OrderList extends Vue {
  private pageOptions: any = [];

  private buyerStatus: any = [
    {
      text: "全部",
      value: null
    },
    {
      text: "待处理",
      value: 0
    },
    {
      text: "审核通过",
      value: 1
    },
    {
      text: "审核未通过",
      value: -1
    }
  ];

  private queryForm: any = {
  };

  private headers: Array<any> = [
    { text: "ID", align: "center", sortable: false, value: "id" },
    { text: "姓名", align: "center", sortable: false, value: "taskId" },
    { text: "QQ", align: "center", sortable: false, value: "platform" },
    { text: "手机号码", align: "center", sortable: false, value: "type" },
    // { text: "身份证号", align: "center", sortable: false, value: "seller" },
    { text: "银行卡号", align: "center", sortable: false, value: "myshop" },
    { text: "创建时间", align: "center", sortable: false, value: "createTime" },
    { text: "更新时间", align: "center", sortable: false, value: "updateTime" },
    { text: "操作", align: "center", sortable: false, value: "action" }
  ];

  private tableData: any = [
  ];
  // 表格选中项目
  private selected: Array<any> = [];

  private loading: boolean = false;

  private dialog: boolean = false;
  private dialogTitle: string = "";
  private dialogType: number = 1;
  private dialogItem: any = {};

  private modal: boolean = false;
  private modalType: number = 1;
  private modalTitle: string = "注意!";
  private modalItem: any = {};
  private modalContent: string = "确认取消订单吗?";
  private isQuery: boolean = false;

  private pagination: Pagination = {
    pageCount: 1,
    page: 1,
    limit: 10,
    offset: 0
  };

  protected mounted() {
    this.getBlackList();
    this.initialize();
  }

  private getTime(date: string) {
    return getTime(date);
  }

  private initialize() {
    this.pageOptions = PageOptions;
  }
  private changeSort() { }

  private toggleAll() {
    if (this.selected.length) this.selected = [];
    else this.selected = this.tableData.slice();
  }

  private onQuery(from?: string) {
    let params: any = {};

    let valid = 0;
    forEach(this.queryForm, (item, key) => {
      // item ? (
      params[key] = item
      // ) : valid++;
    });
    if (valid === 2) {
      // return $Vue.$emit("snackbar", {
      //   message: "请至少填写一个查询条件"
      // });
    }

    if (from === undefined) {
      this.pagination.offset = 0;
      this.pagination.page = 1;
    }
    params.limit = this.pagination.limit;
    params.offset = this.pagination.offset;
    this.getBlackList(params);
    this.isQuery = true;
  }

  /**
   * 新增黑名单
   */
  private onAdd() {
    this.$router.push({
      name: '新增黑名单',
    })
  }

  // 审核
  private onEdit(item: any) {
    this.$router.push({
      name: "新增黑名单",
      params: item,
      query: {
        type: 'edit',
      }
    });
  }

  // 用户信息
  private onInfo(item: any) {
    this.dialog = true;
    this.dialogType = 1;
    this.dialogItem = item;
    this.dialogTitle = "用户信息";
  }

  /**
   * 查看活动订单
   */
  private onActivityOrder(item: any) {
    this.dialog = true;
    this.dialogType = 2;
    this.dialogItem = item;
    this.dialogTitle = "活动订单";
  }

  private onDelete(item: any) {
    this.modal = true;
    this.modalContent = "确定删除该买号吗?";
    this.modalType = 1;
    this.modalItem = item;
  }

  private onBatchAudit() { }

  private onPageChange(page: number) {
    this.pagination.offset = (page - 1) * this.pagination.limit;
    if (!this.isQuery) {
      this.getBlackList();
    } else {
      this.onQuery("wyvonj");
    }
  }

  private onModalConfirm() {
    if (this.modalType === 1) {
      this.deleteBuyer();
    }
  }

  private onDialogConfirm() {
    if (this.dialogType === 1) {
      this.dialog = false;
    } else if (this.dialogType === 2) {
      this.dialog = false;
    }
  }

  /**
   * 获取任务列表
   */
  private async getBlackList(queryForm?: any) {
    let params: ReqBlacklistInfo = {
      offset: this.pagination.offset,
      limit: this.pagination.limit,
    };
    if (queryForm) {
      params = queryForm;
    }

    const { data } = await System.getBlackList.r(params);
    console.log("getBlackList", data);
    if (data.result === 0) {
      if (data.data) {
        if (data.data) {
          let $data = data.data;
          this.tableData = $data.dataList;
          this.pagination.pageCount = $data.totalCount
            ? Math.ceil($data.totalCount / this.pagination.limit)
            : 1;
        }
      }
    } else {
      this.tableData = [];
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 删除买家号
   */
  private async deleteBuyer() {
    const params: any = {
      userId: this.modalItem.userId
    };
    const { data } = await Admin.deleteUser.r(params);
    console.log("getBlackList", data);
    if (data.result === 0) {
      $Vue.$emit("snackbar", {
        message: data.message
      });
      this.getBlackList();
    }
  }

  /**
   * 获取买家用户信息
   */
  private async getUserInfo() {
    const params: any = {
      userId: this.modalItem.userId
    };
    const { data } = await User.getSingleUserInfo.r(params);
    console.log("getBlackList", data);
    if (data.result === 0) {
      $Vue.$emit("snackbar", {
        message: data.message
      });
      this.getBlackList();
    }
  }
}
</script>

<style lang="less" scoped>
.tracetask-container {
  width: 100%;
  height: 100%;
}
</style>


